!<template>
  <div class="image_upload">
    <el-upload
      ref="upload"
      :action="action"
      :data="data"
      :headers="headers"
      :limit="limit"
      list-type="picture-card"
      :multiple="multiple"
      :on-success="handleUploadSuccess"
      :on-remove="handleRemove"
      :show-file-list="multiple"
      :file-list="fileList"
      :style="{
        marginBottom: multiple && computedValues.length ? '20px' : '0px'
      }"
      :with-credentials="withCredentials"
    >

      <template v-if="multiple">
        <div
          :style="{
            width: size + 'px',
            height: size + 'px',
            lineHeight: size + 'px'
          }"
        >
          <i class="el-icon-plus" />
        </div>
      </template>
      <template v-else>
        <img
          v-if="!multiple && value"
          :src="value"
          :style="{
            width: size + 'px',
            height: size + 'px',
            lineHeight: size + 'px'
          }"
          class="el-upload-list__item-thumbnail"
        >
        <i v-else class="el-icon-plus" />
      </template>

    </el-upload>
  </div>
</template>
<script>
export default {
  name: '',
  components: {},
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    // 值
    value: {
      type: [String, Array],
      default() {
        return []
      }
    },

    // 图片显示大小
    size: {
      type: Number,
      default: 145
    },
    // 大小限制(MB)
    fileSize: {
      type: Number
    },
    // 响应处理函数
    responseFn: Function,
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => []
    },

    // 图片懒加载
    lazy: {
      type: Boolean,
      default: false
    },
    // 上传地址 (同官网)
    action: {
      type: String,
      required: true
    },
    // 设置上传的请求头部(同官网)
    headers: Object,
    // 文件个数显示(同官网)
    limit: Number,
    // 是否启用拖拽上传 (同官网)
    drag: {
      type: Boolean,
      default: false
    },
    // 	支持发送 cookie 凭证信息 (同官网)
    withCredentials: {
      type: Boolean,
      default: false
    },
    // 是否支持多选文件 (同官网)
    multiple: {
      type: Boolean,
      default: false
    },
    // 上传时附带的额外参数(同官网)
    data: Object,
    // 上传的文件字段名 (同官网)
    name: {
      type: String,
      default: 'file'
    }

  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      init: false
    }
  },
  computed: {
    computedValues() {
      if (this.value) {
        if (typeof this.value === 'string') {
          return [this.value]
        } else {
          return [...this.value]
        }
      } else {
        return []
      }
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (this.fileList.length === 0 && newValue && newValue.length > 0 && !this.init) {
          this.init = true
          this.fileList = newValue.map(url => ({ url }))
        }
      }
    }
  },
  mounted() {

  },
  created() {

  },
  methods: {
    handleUploadSuccess(response, file) {
      this.init = true
      let url = response
      if (this.responseFn) {
        url = this.responseFn(response, file, this.successFiles)
      }
      if (this.multiple) {
        if (Array.isArray(this.value)) {
          this.$emit('input', [...this.value, url])
        } else {
          this.$emit('input', [url])
        }
      } else {
        this.$emit('input', url)
      }
    },
    handleUploadExceed() {
      this.$message.error(`最多上传${this.limit}张图片`)
    },
    handleRemove(file, fileList) {
      // fileList 为删除后的文件列表
      const value = fileList.map(v => v.url)
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
